<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .modifyModal1,
        .modifyModal2 {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            display: none;
        }

        .modifyModal-box {
            background-color: #fff;
            width: 500px;
            height: 300px;
            margin: 20% auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .modifyModal-box span {
            margin-top: 20px;
        }

        .modifyModal-box button {
            width: 100px;
            height: 30px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <button id="increaseBtn" type="button" class="btn btn-default">增加</button>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
        </tbody>
        <div class="modifyModal1">
            <div class="modifyModal-box">
                <span>ID: <input disabled id="dataId1" type="text"></span>
                <span>姓名: <input id="dataName1" type="text"></span>
                <span>城市: <input id="dataCity1" type="text"></span>
                <button id="increaseBtn1">增加</button>
                <button id="cancelBtn1">取消</button>
            </div>
        </div>
        <div class="modifyModal2">
            <div class="modifyModal-box">
                <span>ID: <input disabled id="dataId2" type="text"></span>
                <span>姓名: <input id="dataName2" type="text"></span>
                <span>城市: <input id="dataCity2" type="text"></span>
                <button id="revise2Btn">修改</button>
                <button id="cancelBtn2">取消</button>
            </div>
        </div>
    </table>
    <script>
        const data = [
            { id: 1, name: "李四", city: "重庆" },
            { id: 2, name: "张三", city: "成都" },
        ];

        //动态渲染
        function renderTbody(data) {
            $("tbody").empty()
            for (let i = 0; i < data.length; ++i) {
                const item = data[i]
                $("tbody").append(`
            <tr>
                <td>${item.name}</td>
                <td>${item.city}</td>
                <td>
            <button type="button" data-id="${item.id}" class="btn btn-danger">删除</button>
            <button type="button" data-id="${item.id}" class="btn btn-info">修改</button>
          </td>
        </tr>
            `)
            }
        }

        renderTbody(data)

        //删
        $("tbody").on("click", ".btn-danger", function (event) {
            const dataId = parseInt($(event.target).attr("data-id"))
            for (let i = 0; i < data.length; ++i) {
                if (data[i].id === dataId) {
                    data.splice(i, 1)
                }
            }
            renderTbody(data)
        })
        //改
        $("#increaseBtn").on("click", function () {
            $(".modifyModal1").css("display", "block")
        })
        $("#revise2Btn").on("click", function () {
            const idValue = parseInt($("#dataId2").val())
            const nameValue = $("#dataName2").val()
            const cityValue = $("#dataCity2").val()
            for (let i = 0; i < data.length; ++i) {
                const item = data[i]
                if (item.id === idValue) {
                    item.name = nameValue
                    item.city = cityValue
                }
            }
            renderTbody(data)
            $(".modifyModal2").hide()
        })
        //增
        $("#increaseBtn").on("click", function () {
            $(".modifyModal1").show()
        })
        //增加
        $("#increaseBtn1").on("click", function () {
            $(".modifyModal1").hide()
            const id = data.length + 1
            const name = $("#dataName1").val()
            const city = $("#dataCity1").val()
            let obj = {
                id, name, city
            }
            data.push(obj)
            console.log(data)
            renderTbody(data)
        })
        //取消
        $("#cancelBtn1").on("click", function () {
            $(".modifyModal1").hide()
        })
        $("#cancelBtn2").on("click", function () {
            $(".modifyModal2").hide()
        })
        $("#revise2Btn").on("click", function () {
            $(".modifyModal2").hide()
        })
        //修改按钮处理
        $("tbody").on("click", ".btn-info", function (event) {
            const dataId = parseInt($(event.target).attr("data-id"));
            $(".modifyModal2").show()
            const currentData = data.find((item) => {
                console.log(item);
                return item.id === dataId;
            });
            $("#dataId2").val(currentData.id)
            $("#dataName2").val(currentData.name)
            $("#dataCity2").val(currentData.city)
        })

    </script>
</body>

</html>